<template>
  <view>
    <base-paging ref="paging" :add-fad="true" :datasource="datasource" :tabs="tabs"
                 @fad-click="toBasePath('/edit')">
      <template #default="{ list }">
        <template v-for="(item, index) in list" :key="index">
          <base-card :thumbnail="imag[item.flag]" :title="'项目费用:'+  item.itemName">
            <template #extra>
              <view style="font-size: .8em;color: #4783fc" @click="toBasePath('/detail?id=' + item.id)">
                {{ item.flag ? '查看详情' : '查看详情' }}
              </view>
            </template>
            <view>
              <view style="margin-bottom: 20rpx; font-size: 30rpx;">
                <text style="display: inline-block; width: 130rpx;color: #999999;">申请人</text>
                <text style="color: #333333;">{{ item.applicant }}</text>
              </view>
              <view  style="margin-bottom: 20rpx;font-size: 30rpx;">
                <text style="display: inline-block; width: 130rpx;color: #999999;">车牌号</text>
                <text  style="color: #333333;">{{ item.applicant }}</text>
              </view>
              <view  style="margin-bottom: 20rpx;font-size: 30rpx;">
                <text style="display: inline-block; width: 130rpx;color: #999999;">日期</text>
                <text style="color: #333333;">{{ item.bookkeepingDate }}</text>
              </view>
			  <view class="flex-ac flex-b">
			    <text></text>
			    <text style="font-size: 34rpx;font-weight: bold;">{{ item.amount }}元</text>
			  </view>
            </view>

            <template #actions>
              <view style="display: flex;gap: 0 20rpx;margin-bottom: 30rpx;">
                <u-button v-if="['reject'].includes(item.flag)"
                          :plain="true" text="修改" type="primary"
                          @click.stop="toBasePath('/edit?edit=true&id=' + item.id)"></u-button>

                <!-- <u-button v-if="['audit','reject'].includes(item.flag)" :plain="true" text="删除"
                          @click.stop="remove(item)"></u-button> -->
				<view class="sc flexmid" v-if="['audit','reject'].includes(item.flag)" @click.stop="remove(item)">删除</view>
              </view>
            </template>
          </base-card>
        </template>
      </template>
    </base-paging>
  </view>
</template>

<script>
import {Msg, toPath} from "@/utils/BaseUtils";
import {BookkeepingApi as Api} from "@/comms/api/bookkeepingApi";

export default {
  data() {
    return {
      toPath,
      active: '',
      imag: {
        audit: '/static/my/jz.png',
        agree: '/static/my/ytg.png',
        reject: '/static/my/jz.png'
      },
      tabs: [
        {key: 'audit', name: '待审核',},
        {key: 'agree', name: '已通过'},
        {key: 'reject', name: '已拒绝'}
      ]
    }
  },
  mounted() {
  },
  onShow() {
    this.reload()
  },
  methods: {
    reload() {
      this.$refs.paging.reload();
    },
    datasource({pageNo, tab}) {
      this.active = tab.key
      return Api.page({pageNo, flag: tab.key})
    },
    remove({id}) {
      Msg.confirm("确定删除该手工记账信息?")
          .then(() => {
            Api.delete({id}).then(res => {
              this.reload();
              Msg.success("删除成功")
            })
          })
    },
    toBasePath(path) {
      toPath("/pages/mys/bookkeeping" + path)
    }
  }
}
</script>

<style lang="scss" scoped>
.uni-card {
  margin-bottom: 15rpx;
}
.sc{
	width: 170rpx;
	height: 70rpx;
	border: 1px solid #b3b3b3;
	border-radius: 10rpx;
	font-size: 30rpx;
	color: #999;
}
.button-group {
  button {
    margin-left: 10rpx;
  }
}
</style>
